﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.6.3");
    google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
    $(document).ready(function () {
        var x = null;
        //Make element draggable
        $(".drag").draggable({
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit'
        });

        $("#droppable").droppable({

            drop: function (e, ui) {
                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                    ui.helper.remove();
                    x.draggable({
                        helper: 'original',
                        containment: '#droppable',
                        tolerance: 'fit'
                    });
                    x.resizable();
                    x.appendTo('#droppable');
                }
            }
        });
    });
</script>
<style type="text/css">
    .col {
        float: left;
        /*padding: 5px 5px 5px 5px;
        margin: 5px 5px 5px 5px;*/
    }

    #col1 {
        width: 200px;
        height: 500px;
        border: 1px solid black;
    }

    .drag {
        width: 200px;
        border: 1px solid black;
        height: 80px;
        position: relative;
        background-color: white;
    }

    .drag3 {
        width: 200px;
        border: 1px solid black;
        height: 200px;
        position: relative;
        background-color: white;
    }

    #droppable {
        width: 500px;
        height: 500px;
        border: 1px solid black;
    }
</style>
<br />
<nav>
    <ul class="pager">
        <li><a href="#">Poprzednia Strona</a></li>
        <li><a href="#">Następna Strona</a></li>        
    </ul>
</nav>
<br />
<div id="container">
</div>
<div id="wrapper">
    <div class="col" id="col1">
        <div id="drag1" class="drag">
            <label>IMIE:</label>
            <input type="text" name="fname">
        </div>
        <div id="drag2" class="drag">
            <label>FIRMA:</label>
            <input type="text" name="fname">
        </div>
        <div id="drag3" class="drag">
            <label>TEKST:</label>
            <textarea name="ta" id="ta" cols="20" rows="2"></textarea>
        </div>
    </div>
    <div class="col" id="droppable">
    </div>
    <div style="clear:both;"></div>
</div>

<br />
<br />
<button class="btn btn-primary" type="button">
    Podgląd dokumentu 
</button>


<button class="btn btn-primary" type="button">
    Wydruk
</button>
